// 创建自调用函数，开启一个新的局部作用域，防止命名冲突

// 第二个对象：蛇snake
(function() {
    // 创建蛇对象
    function Snake(options) {
        options = options || {}; //不传参数时，传入空对象不会报错
        // 每一节蛇的大小
        this.width = options.width || 20;
        this.height = options.height || 20;

        // 蛇移动的方向
        this.direction = options.direction || 'right';
        // 蛇的身体数组：第一个元素时蛇头
        // 记录每一节蛇的坐标和颜色，第一节为蛇头，初始有三节
        this.body = [
            { x: 3, y: 2, color: 'red' },
            { x: 2, y: 2, color: 'blue' },
            { x: 1, y: 2, color: 'blue' }
        ];
    }

    var position = 'absolute';
    var elements = [];
    // 将蛇渲染到map中
    Snake.prototype.render = function(map) {
        // 删除之前创建的蛇
        remove();
        // 把每一节蛇渲染到地图中
        for (var i = 0; i < this.body.length; i++) {
            var object = this.body[i];
            // 动态创建元素
            var div = document.createElement('div');
            map.appendChild(div);
            // 记录当前蛇
            elements.push(div);
            // 为新创建的div设置样式
            div.style.position = position;
            div.style.width = this.width + 'px';
            div.style.height = this.height + 'px';
            div.style.backgroundColor = object.color;
            div.style.left = object.x * this.width + 'px';
            div.style.top = object.y * this.height + 'px';
        }
    }

    // 私有成员
    function remove() {
        for (var i = elements.length - 1; i >= 0; i--) {
            // 第一件事 ：删除div
            elements[i].parentNode.removeChild(elements[i]);
            // 第二件事 : 删除数组中的元素
            elements.splice(i, 1);
        }
    }

    // 控制蛇移动的方法
    Snake.prototype.move = function(food, map) {
        // 蛇身
        // bug : 要先动蛇身，再动蛇头，否则会把移动后的蛇头位置赋给蛇身，蛇身就会覆盖在蛇头上面
        for (var i = this.body.length - 1; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }
        // 蛇头
        var head = this.body[0];
        switch (this.direction) {
            case 'right':
                head.x += 1;
                break;
            case 'left':
                head.x -= 1;
                break;
            case 'top':
                head.y -= 1;
                break;
            case 'bottom':
                head.y += 1;
                break;
        }

        // 2.4 在移动过程中，若蛇头和食物坐标重合，蛇吃掉食物
        // 食物的坐标是实际距离，不是格子的个数
        var headX = head.x * this.width;
        var headY = head.y * this.height;
        if (headX === food.x && headY === food.y) {
            // 食物消失且重新渲染一个
            food.render(map);
            //当蛇吃掉食物时蛇身最后加一节
            // 获取蛇的最后一节，添加到蛇的body中，蛇吃掉食物又走了一步
            var last = this.body[this.body.length - 1];
            //使用对象拷贝的方式
            var newLast = {};
            for (var k in last) {
                newLast[k] = last[k];
            }
            this.body.push(newLast);
            // this.body.push({
            //     x: last.x,
            //     y: last.y,
            //     color: last.color,
            // })
        }
    }

    // 暴露构造函数给外部访问
    window.Snake = Snake;
})()

// 测试
// var snake = new Snake();
// var map = document.getElementById('map');
// snake.render(map);